<template>

	<view class="contain">
		<!-- 信息 -->
		<view class="info">
			<view class="cu-list menu-avatar">
				<view class="cu-item">
					<view class="cu-avatar round lg" :style="'background-image:url('+info.head+');'"></view>
					<view class="content flex-sub">
						<view>{{info.nick_name}}</view>
						<view class="text-gray text-sm flex justify-between">
							{{info.time}}
						</view>
					</view>
					<view style="font-weight: bold;margin-right: 5%;">{{info.location}}</view>
					
					<view style="margin-left: 20rpx;">
						<uni-rate v-model="rate" disabledColor="orange" allowHalf="true" size="20" />
					</view>
				</view>
			</view>
			<view class="grid flex-sub padding-lr">
				<image :src="info.fileID"></image>
			</view>
			<view class="text-content" style="margin-left: 20rpx;font-weight: bold;">
				{{info.title}}
			</view>
			<view class="text-content" style="margin-left: 20rpx;">
				{{info.content}}
			</view>
			<view style="margin-left: 20rpx;">
				<uni-rate v-model="info.rate" disabledColor="orange" disabled="true" allowHalf="true" size="20" />
			</view>
			<view style="margin-left: 20rpx;">价格：{{info.price}}元<view><image :src=scImg  style="margin-right: 100rpx;width: 40rpx;" mode="widthFix" @click="shouCang"></image></view> </view>
			
		</view>
		<!-- 已评论的 -->
		<view  v-for="(item, index) in info.comment" :key="item.head">
			
			<view class="cu-list menu-avatar comment solids-top">
				<view class="cu-item">
					<view class="cu-avatar round" :style="'background-image:url('+item.head+');'"></view>
					<view class="content">
						<view class="text-grey">{{item.nick_name}}</view>
						<view class="text-gray text-content text-df">
							{{item.content}}
						</view>
						<view class=" flex justify-between">
							<view class="text-gray text-df">{{item.time}}</view>
							<view>
								<text class="cuIcon-appreciatefill text-red"></text>
								<text class="cuIcon-messagefill text-gray margin-left-sm"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 评论 -->
		<view class="comm">
			<input @input="onKeyInput" style="margin-left: 10rpx;width: 80%;" class="uni-input " placeholder="评论" />
			<view class="text-gray text-xl" style="margin-right: 10rpx;" @click="comment_it">
				<text class="cuIcon-messagefill"></text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				// 输入的评论
				inputValue: '',
				rate: 0,
				scImg: "../../static/images/sc.png"
			};
		},
		onLoad: function(option) {
			let _this = this
			const eventChannel = this.getOpenerEventChannel()
			// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
			eventChannel.on('acceptDataFromOpenerPage', function(data) {
				console.log(data)
				_this.info = data.data
				_this.info.comment.reverse()
			})
			console.log(this.info)
		},
		methods: {
			// 实时获取输入的评论
			onKeyInput: function(event) {
				this.inputValue = event.target.value
			},
			// 评论
			comment_it: function(e) {
				let arr = {};
				arr.nick_name = uni.getStorageSync('nick_name');
				arr.head = uni.getStorageSync('avatarUrl');
				arr.content = this.inputValue;
				let date = new Date(),
					year = date.getFullYear(),
					month = date.getMonth() + 1,
					day = date.getDate(),
					// hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
					time = year + '-' + month + '-' + day
				arr.time = time
				let _this = this;
				// 调用云函数 更新记录中的评论数组
				uniCloud.callFunction({
					name: "update",
					data: {
						_id: _this.info._id,
						arr: arr
					}
				}).then(res => {
					console.log(res)
					if(res.success == true)
					{
						uni.showToast({
							title: '评论成功',
							duration: 2000
						})
						_this.info.comment.splice(0,0,arr)
					}
					else 
					uni.showToast({
						title: '评论失败',
						duration: 2000,
						icon: none
					})
				})
			},
			// 收藏
			shouCang:function(e) {
				if(this.scImg == "../../static/images/sc.png") {
					this.scImg = "../../static/images/scEd.png"
					uni.showToast({
						duration:2000,
						title: "收藏成功"
					})
				}
				else {
					this.scImg = "../../static/images/sc.png"
					uni.showToast({
						duration:2000,
						title: "取消收藏",
						icon:"none"
					})
				}
				
			}
		}
	}
</script>

<style lang="scss">
	.contain {
		display: flex;
		flex-direction: column;
	}

	.info {
		width: 90%;
		box-shadow: 0 0 10rpx #ccc;
		height: auto;
		margin-left: 5%;
		margin-top: 20rpx;
		border-radius: 10rpx;
	}

	.comment {
		width: 90%;
		box-shadow: 0 0 10rpx #ccc;
		height: auto;
		margin-left: 5%;
		margin-top: 20rpx;
		border-radius: 10rpx;
	}

	.comm {
		display: flex;
		position: fixed;
		bottom: 10rpx;
		width: 90%;
		justify-content: space-between;
		margin-left: 5%;
		border-radius: 20rpx;
		box-shadow: 0 0 20rpx #ccc;
	}
</style>
